<template>
  <div class="oper-ation">
    <div class="machine-list" ref="operation"></div>
  </div>
</template>

<script>
// 引入vueX数据管理中心
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapState } = createNamespacedHelpers("menuModule");
// 引入元素监听大小
import ElementMonitor from "element-resize-detector";
export default {
  data() {
    return {
        operation:null
    };
  },
  // 计算属性
  computed: {
    ...mapState(["RunningChart_State","ToRender"]),
  },
 watch:{
   ToRender:function(newToRender, oldToRender){
    console.log('变身==>newToRender',newToRender);
    console.log('变身==>oldToRender',oldToRender);
     this.operation.setOption(this.RunningChart_State);
   }
 },
  mounted() {
    this.ChartOperation()
    
  },
  methods: {
    ChartOperation() {
      this.operation = this.$echarts.init(this.$refs.operation);
      console.log('图表==>',this.operation);
      ElementMonitor().listenTo(this.$refs.operation, (res) => {
        this.operation.resize();
      });
      this.operation.setOption(this.RunningChart_State);
    },

  },
};
</script>

<style lang="less" scoped>
.oper-ation {
 width: 100%;
  .machine-list{
 overflow-y: auto;
  margin: 0 auto ;
  width: 100%;
  height: 3.9rem;
  text-align: center;
  }
}
</style>
